<template>
  <transition enter-active-class="animated faster zoomIn" leave-active-class="animated faster zoomOut">
    <div class="loading-wrap publicZIndexLoading publicVCenter" v-if="loadingVisible">
      <img src="https://static.joymew.com/joymewMpBar/bgCompress.png" class="bgImg" />
      <div class="shade"></div>
      <img src="https://static.joymew.com/joymewMpBar/logoText2.png" class="logoTextImg" />
      <img src="https://static.joymew.com/joymewMpBar/slogan.png" class="sloganImg" />
      <div class="company">上海嗨喵网络科技有限公司</div>
      <div class="progressBar publicVCenter">
        <div class="percent">{{ currentLoadingProgress }}</div>
        <div class="bgBar"></div>
        <span class="loading" :style="{ width: currentLoadingProgress }"></span>
      </div>
    </div>
  </transition>
</template>
<script>
import { mapState } from 'vuex';

export default {
  name: 'loading',
  computed: {
    ...mapState({
      loadingVisible: (state) => state.app.loadingVisible,
      currentLoadingProgress: (state) => state.app.currentLoadingProgress,
    }),
  },
  beforeDestroy() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.loading-wrap {
  width: 100%;
  height: 100%;
  position: absolute;
  flex-direction: column;
  .bgImg {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .shade {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0px 0px 216px 168px rgba(0, 0, 0, 0.25) inset;
  }
  .logoTextImg {
    width: 216px;
    height: 64px;
    margin-top: 178px;
    position: relative;
  }
  .sloganImg {
    width: 462px;
    height: 274px;
    margin-top: 142px;
    position: relative;
  }
  .company {
    color: #fff;
    font-size: 20px;
    font-weight: 400;
    position: absolute;
    bottom: 114px;
  }
  .progressBar {
    height: 8px;
    width: 520px;
    position: absolute;
    bottom: 320px;
    flex-direction: column;
    .loading {
      display: inline-block;
      height: 100%;
      border-radius: 10px;
      background-image: linear-gradient(to right, #6550f5 0%, #ff68f9 100%);
      position: absolute;
      left: 0;
    }
    .percent {
      position: absolute;
      top: -80px;
      font-size: 42px;
      font-weight: 600;
      color: #ff3db8;
    }

    .bgBar {
      height: 100%;
      width: 100%;
      background-color: #fff;
      position: absolute;
      border-radius: 10px;
    }
  }
}
</style>
